<template>
  <div class="mine-content">
    <i class="mine-status" :class="`is-${status}`"></i>
    <span class="mine-text">{{ $common.fetchSingleWord({ val: value, dict: dict }) }}</span>
    <!-- <span class="mine-rate" :class="`is-${status}`">
      {{ $common.getRate(row.completed, row.totalCount, 2) }}
    </span> -->
  </div>
</template>
<script>
export default {
  props: {
    dict: {
      type: Array,
      default: function () { return []; }
    },
    row: {
      type: Object,
      default: function () { return {}; }
    },
    value: {
      type: [String, Boolean, Number],
      default: ''
    }
  },
  computed: {
    status () {
      return this.$common.fetchSingleWord({ val: this.value, dict: this.dict, nameKey: 'type' });
    }
  }
}
</script>
<style lang="less" scoped>
  @import url('~@/style/variables.less');
  .mine-content {
    display: flex;
    align-items: center;
  }
  .mine-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: @--color-text-placeholder;
    display: inline-block;
    margin-right: 8px;
    &.is-primary {
      background-color: @--color-primary;
    }
    &.is-success {
      background-color: @--color-success;
    }
    &.is-warning {
      background-color: @--color-warning;
    }
    &.is-danger {
      background-color: @--color-danger;
    }
  }
  .mine-text {
    margin-right: 8px;
  }
  .mine-rate {
    &.is-success {
      display: none;
    }
  }
</style>
